/**
 * 圆圈进度条
 * 2017.06.28
 * gehaiqing
 * 
 * 属性:
 * size:大小
 * circleBorderWidth:圆圈的边框宽度
 * color:颜色
 * fontSize:中间文字大小
 * progress:进度，数字0-100
 */
Vue.component('circle-progress', {
	template: '<div class="com-circle-progress" :style={width:size,height:size,borderColor:color}>' +
		'<div class="com-circle-progress-left" ><span :style={borderWidth:circleBorderWidth,borderTopColor:color,borderLeftColor:color,transform:leftTrans}></span></div>' +
		'<div class="com-circle-progress-right" ><span :style={borderWidth:circleBorderWidth,borderTopColor:color,borderRightColor:color,transform:rightTrans}></span></div>' +
		'<div class="com-circle-progress-inner" :style={fontSize:fontSize,color:color}>{{parseInt(progress)}}%</div>' +
		'</div>',
	props: ['size', 'circleBorderWidth', 'color', 'fontSize', 'progress'],
	data: function() {
		return {
			leftTrans: '',
			rightTrans: ''
		};
	},
	created: function() {
		this.genTrans();
	},
	methods: {
		genTrans: function() {
			this.leftTrans = 'rotate(' + (-225 + (this.progress > 50 ? (this.progress - 50) : 0) / 100 * 360) + 'deg)';
			this.rightTrans = 'rotate(' + (-135 + (this.progress > 50 ? 50 : this.progress) / 100 * 360) + 'deg)';
		}
	},
	watch: {
		progress: function() {
			this.genTrans();
		}
	}
});

/**
 * 跳转主页的按钮组件
 * 2017.07.18
 */
Vue.component('to-home-btn', {
	template: '<div class="mui-icon mui-icon-home"></div>',
	props: ['before'],
	data: function() {
		return {

		};
	},
	created: function() {
		this.genTrans();
	},
	methods: {
		goHome:function(){
			
		}
	},
	watch: {
	}
});